// 导航容器样式
.nav {
  width: 100%
  max-width: 1200px
  margin: 20px auto
  padding: 10px 20px
  position: relative

  // 导航列表样式
  ul {
    display: flex
    justify-content: center
    align-items: center
    list-style: none
    padding: 0
    margin: 0
    flex-wrap: wrap
    gap: 8px
  }

  // 列表项样式
  li {
    margin: 4px 8px
    flex-shrink: 0
  }

  // 搜索按钮特殊样式
  .search-toggle {
    position: relative
    cursor: pointer
    transition: all 0.3s ease

    &:hover {
      color: var(--color-primary)
    }
  }
}

// 导航链接样式
.nav-link {
  display: flex
  align-items: center
  text-decoration: none
  font-size: 1.1rem
  color: inherit
  padding: 8px 12px
  transition: all 0.3s ease
  text-shadow: 0.1rem 0.1rem 0.2rem rgb(1, 162, 190)
  border-radius: 6px
  white-space: nowrap

  &:hover {
    transform: translateY(-2px)
    background-color: rgba(255, 255, 255, 0.1)
  }
}

// 导航图标容器样式
.nav-icon-container {
  display: inline-flex
  margin-right: 6px
}

// 导航图标样式
.nav-icon {
  stroke: currentColor
  stroke-width: 2
}

// 移动端菜单切换按钮样式
.mobile-menu-toggle {
  display: none
  background: transparent !important
  backdrop-filter: none
  border: none !important
  color: white
  cursor: pointer
  position: fixed
  top: 20px
  right: 20px
  z-index: 101
  padding: 12px
  border-radius: 12px
  transition: all 0.3s ease
  box-shadow: none !important

  .menu-icon-wrapper {
    position: relative
    display: block
    width: 24px
    height: 24px
  }

  .menu-icon {
    position: absolute
    top: 0
    left: 0
    stroke: white
    stroke-width: 2
    transition: all 0.3s ease
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3))

    &:hover {
      filter: drop-shadow(0 0 8px rgba(1, 162, 190, 0.6))
    }

    &.menu-open {
      opacity: 1
      transform: rotate(0deg)
    }

    &.menu-close {
      opacity: 0
      transform: rotate(90deg)
    }
  }

  &:hover {
    transform: scale(1.05)
    background: transparent !important
    border: none !important
    box-shadow: none !important
  }

  &:active {
    transform: scale(0.95)
    background: transparent !important
  }

  &[aria-expanded="true"] {
    background: transparent !important
    border: none !important

    .menu-open {
      opacity: 0
      transform: rotate(-90deg)
    }

    .menu-close {
      opacity: 1
      transform: rotate(0deg)
    }
  }
}

// 针对导航项过多的情况进行优化
@media (min-width: 901px) {
  .nav {
    ul {
      // 当导航项过多时，允许换行
      flex-wrap: wrap
      max-width: 100%
      
      // 确保至少有两行时的垂直间距
      row-gap: 10px
    }
  }
}

@media (max-width: 1024px) {
  .nav {
    max-width: 100%
    padding: 10px 15px
    
    ul {
      gap: 6px
    }
    
    li {
      margin: 3px 6px
    }
  }
  
  .nav-link {
    font-size: 1rem
    padding: 6px 10px
  }
}

@media (max-width: 900px) {
  .nav {
    ul {
      gap: 4px
    }
    
    li {
      margin: 2px 4px
    }
  }
    .nav-link {
    font-size: 0.95rem
    padding: 6px 8px
    
    span:last-child {
      display: none
    }
  }
  
  .nav-icon-container {
    margin-right: 0
  }
  
  // 在900px断点及以上不显示移动端菜单按钮
  .mobile-menu-toggle {
    display: none !important
  }
}

// 确保在768px-900px区间内也不显示移动菜单切换按钮
@media (min-width: 769px) and (max-width: 900px) {
  .mobile-menu-toggle {
    display: none !important
  }
}

// 在768px以下才完全隐藏原导航栏，显示移动端菜单
@media (max-width: 768px) {
  .nav {
    width: 100%
    margin: 10px auto
    
    // 完全隐藏原导航栏
    ul {
      display: none
      flex-direction: column
      position: fixed
      top: 70px
      left: 50%
      transform: translateX(-50%)
      width: 95%
      max-width: 420px
      background: linear-gradient(135deg, 
        rgba(0, 0, 0, 0.15) 0%, 
        rgba(0, 0, 0, 0.25) 30%,
        rgba(0, 0, 0, 0.35) 70%,
        rgba(0, 0, 0, 0.25) 100%)
      backdrop-filter: blur(20px)
      border: 1px solid rgba(1, 162, 190, 0.15)
      border-radius: 20px
      padding: 24px 0
      box-shadow: 
        0 20px 50px rgba(0, 0, 0, 0.3),
        0 8px 20px rgba(1, 162, 190, 0.05),        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -1px 0 rgba(1, 162, 190, 0.1)
      z-index: 99
      gap: 6px
      opacity: 0
      transform: translateX(-50%) translateY(-15px) scale(0.9)
      transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1)
      
      &.active {
        display: flex !important
        opacity: 1
        transform: translateX(-50%) translateY(0) scale(1)
        animation: mobileMenuBounceIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards
      }
      
      &::before {
        content: ""
        position: absolute
        top: -9px
        left: 50%
        transform: translateX(-50%)
        width: 18px
        height: 18px
        background: linear-gradient(135deg, 
          rgba(0, 0, 0, 0.25) 0%, 
          rgba(0, 0, 0, 0.35) 100%)
        border: 1px solid rgba(1, 162, 190, 0.15)
        border-bottom: none
        border-right: none
        transform: translateX(-50%) rotate(45deg)
        border-radius: 3px 0 0 0
        z-index: 1
      }
      
      &::after {
        content: ""
        position: absolute
        top: 0
        left: 0
        right: 0
        bottom: 0
        background: linear-gradient(45deg,
          rgba(1, 162, 190, 0.03) 0%,
          transparent 30%,
          transparent 70%,
          rgba(1, 162, 190, 0.03) 100%)
        border-radius: 20px
        pointer-events: none
      }
    }
    
    li {
      margin: 8px 20px
      text-align: center
      position: relative
      opacity: 0
      transform: translateY(15px)
      animation: mobileMenuItemSlideIn 0.3s ease-out forwards
      
      &:nth-child(1) { animation-delay: 0.1s }
      &:nth-child(2) { animation-delay: 0.15s }
      &:nth-child(3) { animation-delay: 0.2s }
      &:nth-child(4) { animation-delay: 0.25s }
      &:nth-child(5) { animation-delay: 0.3s }
      &:nth-child(6) { animation-delay: 0.35s }
      &:nth-child(7) { animation-delay: 0.4s }
      &:nth-child(8) { animation-delay: 0.45s }
      
      &:not(:last-child)::after {
        content: ""
        position: absolute
        bottom: -4px
        left: 15%
        right: 15%
        height: 1px
        background: linear-gradient(90deg, 
          transparent, 
          rgba(1, 162, 190, 0.2), 
          rgba(1, 162, 190, 0.4),
          rgba(1, 162, 190, 0.2),
          transparent)
        opacity: 0.6
      }
    }
  }
  
  .nav-link {
    justify-content: center
    align-items: center
    padding: 16px 24px
    font-size: 1.1rem
    border-radius: 14px
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1)
    position: relative
    overflow: hidden
    background: rgba(255, 255, 255, 0.01)
    border: 1px solid rgba(255, 255, 255, 0.03)
    
    &::before {
      content: ""
      position: absolute
      top: 0
      left: -100%
      width: 100%
      height: 100%
      background: linear-gradient(90deg, transparent, rgba(1, 162, 190, 0.1), transparent)
      transition: left 0.6s ease
      z-index: 0
    }
    
    &::after {
      content: ""
      position: absolute
      top: 50%
      left: 50%
      width: 0
      height: 0
      background: radial-gradient(circle, rgba(1, 162, 190, 0.2) 0%, transparent 70%)
      border-radius: 50%
      transition: all 0.4s ease
      transform: translate(-50%, -50%)
      z-index: 0
    }
    
    &:hover {
      background: linear-gradient(135deg,
        rgba(1, 162, 190, 0.12) 0%,
        rgba(1, 162, 190, 0.08) 50%,
        rgba(1, 162, 190, 0.04) 100%)
      border-color: rgba(1, 162, 190, 0.3)
      transform: translateY(-3px) scale(1.02)
      box-shadow: 
        0 8px 20px rgba(1, 162, 190, 0.1),
        0 4px 10px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.08)
      text-shadow: 0 0 8px rgba(1, 162, 190, 0.4)
      
      &::before {
        left: 100%
      }
      
      &::after {
        width: 120px
        height: 120px
      }
    }
    
    &:active {
      transform: translateY(-1px) scale(0.98)
      transition: all 0.1s ease
    }
    
    span:last-child {
      display: inline
      font-weight: 600
      position: relative
      z-index: 1
      letter-spacing: 0.5px
    }
  }
  
  .nav-icon-container {
    margin-right: 10px
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1)
    position: relative
    z-index: 1
    
    .nav-link:hover & {
      transform: scale(1.15) rotate(8deg)
      filter: drop-shadow(0 0 8px rgba(1, 162, 190, 0.6))
    }
    
    .nav-icon {
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3))
    }
  }
  
  .mobile-menu-toggle {
    display: block !important
    position: fixed
    top: 20px
    right: 20px
    z-index: 101
    background: transparent !important
    backdrop-filter: none
    border: none !important
    border-radius: 12px
    padding: 12px
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1)
    box-shadow: none !important
    
    &:hover {
      transform: scale(1.05)
      background: rgba(1, 162, 190, 0.1) !important
      border: none !important
      box-shadow: none !important
    }
    
    &:active {
      transform: scale(0.95)
      transition: all 0.1s ease
    }
    
    .menu-icon {
      stroke: white
      transition: all 0.3s ease
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5))
      
      &:hover {
        filter: drop-shadow(0 0 8px rgba(1, 162, 190, 0.8))
      }
    }
  }
  
  // 搜索按钮特殊样式
  .search-toggle {
    background: linear-gradient(135deg, rgba(1, 162, 190, 0.25), rgba(1, 162, 190, 0.15))
    border: 1px solid rgba(1, 162, 190, 0.4)
    box-shadow: 0 4px 12px rgba(1, 162, 190, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1)
    
    &:hover {
      background: linear-gradient(135deg, 
        rgba(1, 162, 190, 0.35), 
        rgba(1, 162, 190, 0.25))
      border-color: rgba(1, 162, 190, 0.6)
      box-shadow: 
        0 6px 16px rgba(1, 162, 190, 0.2),
        0 0 20px rgba(1, 162, 190, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.15)
    }
  }
}

@media (max-width: 480px) {
  .nav {
    ul {
      width: 98%
      max-width: 380px
      padding: 20px 0
      border-radius: 18px
      
      &::before {
        width: 14px
        height: 14px
        top: -7px
      }
    }
    
    li {
      margin: 6px 16px
    }
  }
  
  .nav-link {
    font-size: 1rem
    padding: 14px 20px
    border-radius: 12px
  }
}

// 新增动画关键帧
@keyframes mobileMenuBounceIn {
  0% {
    opacity: 0
    transform: translateX(-50%) translateY(-20px) scale(0.8)
  }
  60% {
    opacity: 1
    transform: translateX(-50%) translateY(2px) scale(1.05)
  }
  100% {
    opacity: 1
    transform: translateX(-50%) translateY(0) scale(1)
  }
}

@keyframes mobileMenuItemSlideIn {
  0% {
    opacity: 0
    transform: translateY(15px)
  }
  100% {
    opacity: 1
    transform: translateY(0)
  }
}

// 为移动端菜单添加渐入动画
@keyframes mobileMenuSlideIn {
  from {
    opacity: 0
    transform: translateX(-50%) translateY(-20px) scale(0.9)
  }
  to {
    opacity: 1
    transform: translateX(-50%) translateY(0) scale(1)
  }
}

@keyframes mobileMenuSlideOut {
  from {
    opacity: 1
    transform: translateX(-50%) translateY(0) scale(1)
  }
  to {
    opacity: 0
    transform: translateX(-50%) translateY(-20px) scale(0.9)
  }
}

// 移动端菜单项逐个显示动画 - 更新版本
@media (max-width: 768px) {
  .nav ul.active li {
    animation: fadeInUp 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) forwards
    opacity: 0
    
    &:nth-child(1) { animation-delay: 0.08s }
    &:nth-child(2) { animation-delay: 0.12s }
    &:nth-child(3) { animation-delay: 0.16s }
    &:nth-child(4) { animation-delay: 0.2s }
    &:nth-child(5) { animation-delay: 0.24s }
    &:nth-child(6) { animation-delay: 0.28s }
    &:nth-child(7) { animation-delay: 0.32s }
    &:nth-child(8) { animation-delay: 0.36s }
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0
    transform: translateY(25px) scale(0.95)
  }
  to {
    opacity: 1
    transform: translateY(0) scale(1)
  }
}

// 移动端菜单遮罩层优化
.mobile-menu-backdrop {
  position: fixed
  top: 0
  left: 0
  width: 100%
  height: 100%
  background: linear-gradient(45deg,
    rgba(0, 0, 0, 0.4) 0%,
    rgba(0, 0, 0, 0.3) 50%,
    rgba(1, 162, 190, 0.1) 100%)
  backdrop-filter: blur(4px)
  z-index: 98
  opacity: 0
  visibility: hidden
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1)
  
  &.active {
    opacity: 1
    visibility: visible
  }
}

@media (min-width: 769px) {
  .mobile-menu-backdrop {
    display: none
  }
}